<?php
include("./config.php");
include("./utils.php");
?>
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>快捷键壁纸</title>
  <?php include 'scripts-inc.php' ?>

<script src="./farbtastic/farbtastic.js"></script>
<link rel="stylesheet" href="./farbtastic/farbtastic.css">

  <style type="text/css">

#wrapper{
  margin: 0;
  padding: 0;
}
.theme-span{
  filter:alpha(opacity=70);  
  -moz-opacity:0.7;  
  -khtml-opacity: 0.7;  
  opacity: 0.7;  
  width:240px;
  height:82px;
  background-color:#846f48;
  margin:1px 3px;
  border:1px solid white;
  padding-top:15px;
  padding-bottom:15px;
}
.theme-header{
  background-color:white;
  color:#846f48;
  margin-bottom: 4px;
}
#theme-background{
  margin:auto;
  width:1910px;
  height:1070px;
  padding:23px 90px;
}
#theme-header{
  width:1920px;
}
  </style>
  <script>

function column_template(){/*
<section class="clearfix wrap-cate">

<div id="theme-background" class="text-center" 
  style='background-image:url(http://img4.duitang.com/uploads/item/201406/25/20140625095815_zMM2B.jpeg)'>
  <div class="text-left">

    <div class="col-xs-3 col-sm-1 col-md-1 col-lg-1 theme-span text-left"
      style="padding:1px 3px; opacity:0.9">
      <img src="{logo}"
        style='max-width:70px;_width:expression(this.width>70?70px:this.width);'/>
      <span style="color:white;font-weight:bold;font-size:1.3em;">{head}</span>
    </div>

    {hrefs}
  </div>

</div>

</section>


*/}

function url_template(){/*
<div class="col-xs-3 col-sm-1 col-md-1 col-lg-1 theme-span">
<div class="list-group">
  <div class="" style="">
    <h4 class="list-group-item-heading" style="color:white;">
      {i}. {shortcut}
    </h4>
    <p class="list-group-item-text" style="color:white;">{name}</p>
  </div>
</div>

</div>
*/}



  var gAppID=<?php echo getFromMap($_GET, 'appid', 0); ?>;
  gLang='<?php echo getFromMap($_GET, 'lang', 'cn'); ?>';
  $(function(){

    $('#colorpicker').farbtastic('#theme-color');

    $('#set-theme-color').click(function(){
      var color = $("#theme-color").val();
      if(color && color[0]!='#') color = '#'+color;
      $(".theme-span").css("background-color", color);
    });

    $("#hide-all").click(function(){
      $(".navbar").hide();
      $(".set-theme-image").hide();
      $("#content").css("padding","0").css("margin","0");
      $("html").css("padding","0").css("margin","0");
      $("#wrapper").css("padding","0").css("margin","0");
      $("#result").css("padding","0").css("margin","0");
      $("body").css("margin","-10px");
      
    });
    $("#search-container").hide();

    $("#tlogo").change(function(){
      var tlogo = 'url('+$("#tlogo").val()+')';
      $("#theme-background").css("background-image", tlogo);
    });
    $("#topacity").change(function(){
      var topacity = $("#topacity").val();
      $(".theme-span").css("opacity", topacity);
    });

    if(!gAppID) gAppID = 2;
    var u='query.php?op=all&appid='+gAppID+'&lang='+gLang;
    $.ajax({url:u,
        dataType:"json",
        async:true,
        success : function(msg, textStatus) {
          get_all_callback(gAppID, msg);
          gen_page(gAppID, 0);
          $(".theme-span:gt(83)").hide();
          $("#mykeys").show();

          var title = $(document).attr("title");
          $(document).attr("title", title+'壁纸');//修改title值
        }
    },"text");

    // --------------------------------------------------
  });//end of $(function(){
  </script>
</head>
<body>

<div id="wrapper">
<div id="container">

<div id="nav_data_src">
  <?php include 'navbars-inc.php' ?>
</div>


<div class="clearfix"></div>
</div><!-- end of search-container -->

<div class="clearfix"></div>

<div id="content" class="" name="top">

<div class="set-theme-image">

  <div class="form-group row">
    <label for="" class="col-xs-3 col-sm-2 col-md-2 col-lg-2 control-label">说明</label>
    <div class="text-muted col-xs-7 col-sm-6 col-md-6 col-lg-6">图片请使用1920x1080的，只会显示最多84个键<br/>请使用网页截图制作成</div>
    <button type="submit" class="btn btn-success col-xs-2 col-sm-1 col-md-1 col-lg-1" id="hide-all">壁纸模式</button>
  </div>
  <div class="form-group row">
    <label for="" class="col-xs-3 col-sm-2 col-md-2 col-lg-2 control-label">透明度</label>
    <div class="text-muted col-xs-7 col-sm-6 col-md-6 col-lg-6">
      <input type="" onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
       class="form-control" id="topacity" name="topacity" placeholder="0-1" value="0.7">
    </div>
  </div>

  <div class="form-group row">
    <label for="tlogo" class="col-xs-3 col-sm-2 col-md-2 col-lg-2 control-label">背景图片(1920x1080)</label>
    <div class="col-xs-7 col-sm-6 col-md-6 col-lg-6">
      <input type="" class="form-control" id="tlogo" name="tlogo" 
        placeholder="" value="http://img4.duitang.com/uploads/item/201406/25/20140625095815_zMM2B.jpeg">
    </div>
  </div>

  <div class="form-group row">
    <label for="" class="col-xs-3 col-sm-2 col-md-2 col-lg-2 control-label">颜色</label>
    <div class="text-muted col-xs-7 col-sm-6 col-md-6 col-lg-6">
      <input id="theme-color" type="text" value="#846f48" />
      <div id="colorpicker"></div>
    </div>
    <button type="submit" class="btn btn-primary col-xs-2 col-sm-1 col-md-1 col-lg-1" id="set-theme-color">确认</button>

  </div>



</div>
  <div id="result" >
    载入中...
  </div>


  <div class="clearfix"></div>

  <div class="text-right" id="mykeys" style="display: none">
    <a href="./index.php" class="" >
      <img src="./css/log-orange.png" style='max-width:22px;_width:expression(this.width > 22 ? "22px" : this.width);'/>快捷键大全
    </a>
    <a href="./index.php" class="" >http://mykeys.sinaapp.com/</a>
    <span>
      <img src="./css/logo-black.png" style='max-width:22px;_width:expression(this.width > 22 ? "22px" : this.width);'/>
      关注微博(Ankiang)
    </span>
    <span>
      <img src="./css/logo.png" style='max-width:22px;_width:expression(this.width > 22 ? "22px" : this.width);'/>
      <a href="http://jq.qq.com/?_wv=1027&k=2COcMT9" target="_blank">加入快捷键交流QQ群(530154123)</a>
    </span>
  </div>

</div>


<div class="clearfix"></div>
<div id="hide-result"> </div>
<!-- .................................................... -->
</div><!-- end of container -->
</div><!-- end of wrapper -->
</body>
</html>
